<template>
  <div ref="chartDom"></div>
</template>

<script type="text/ecmascript-6">
import echarts from 'echarts'
import {addListener, removeListener} from 'resize-detector'
import {debounce} from 'lodash'
export default {
  props: {
    option: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    option(val) {
      this.chart.setOption(val)
    }
  },
  created() {
    this.resize = debounce(this.resize, 300)
  },
  mounted() {
    this.renderChart()
    addListener(this.$refs.chartDom, this.resize)
  },
  beforeDestroy() {
    removeListener(this.$refs.chartDom, this.resize)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    renderChart() {
      this.chart = echarts.init(this.$refs.chartDom)
      this.chart.setOption(this.option)
    },
    resize() {
      console.log('chart resize')
      this.chart.resize()
    }
  }
}
</script>
